<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('用户信息详细')" />
	<th:block th:include="include :: jsonview-css" />
	<!-- echart引用 -->
	<th:block th:include="include :: echarts-js" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m-t" id="signupForm">
<!--		<div class="form-group">-->
<!--			<label class="col-sm-2 control-label">编号：</label>-->
<!--			<div class="form-control-static" th:text="${member.id}"></div>-->
<!--		</div>-->
		<div class="form-group">
			<label class="col-sm-2 control-label"></label>
			<div class="thumbnail" style="width: 140px; height: 140px; float: left;">
				<!-- 这里根据用户实际头像 -->
<!--				<img th:src="@{/img/user-face.jpeg}">-->
				<img style="width: 100%; height: 100%;" th:src="@{/img/user-face.jpeg}">
				<!-- 网络图-->
<!--				<img style="width: 100%; height: 100%;" src="https://img2.baidu.com/it/u=2069352030,3033107297&fm=253&fmt=auto&app=120&f=JPEG">-->
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">姓名：</label>
			<div class="form-control-static" th:text="${member.name}"></div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">性别：</label>
			<div class="form-control-static" th:class="${member.sex == '0' ? 'label label-primary' : 'label label-danger'}" th:text="${member.sex == '0' ? '男' : '女'}">
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">职位：</label>
			<div class="form-control-static" th:text="项目总监"></div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">个人履历：</label>
			<div class="form-control-static" style="width: 80%; float: left;">
				<textarea name="personalHistory" th:field="*{member.personalHistory}" class="form-control" type="text" disabled></textarea>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">能力值：</label>
			<div class="form-control-static"><pre id="attrMap"></pre></div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">能力雷达：</label>
			<div class="form-control-static">
				<div class="echarts" id="echarts-radar-chart"></div>
			</div>
		</div>

	</form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jsonview-js" />
    <script th:inline="javascript">

		$(function() {
			let attrMap = [[${member.attrOriginMap}]];
			if ($.common.isNotEmpty(attrMap) && attrMap.length < 2000) {
				$("#attrMap").JSONView(attrMap);
			} else {
				$("#attrMap").text(attrMap);
			}

			// 雷达图
			let radarChart = echarts.init(document.getElementById("echarts-radar-chart"));
			let radarOption = {
				// title : {
				// 	text: '预算 vs 开销',
				// 	subtext: '纯属虚构'
				// },
				tooltip : {
					trigger: 'axis'
				},
				// legend: {
				// 	orient : 'vertical',
				// 	x : 'right',
				// 	y : 'bottom',
				// 	data:['预算分配','实际开销']
				// },
				polar : [
					{
						indicator : [
							{ text: '专业', max: 150},
							{ text: '素质', max: 150},
							{ text: '业务', max: 150},
							{ text: '执行', max: 150},
							{ text: '思维', max: 150},
							{ text: '创新', max: 150}
						]
					}
				],
				calculable : true,
				textStyle : {
					color: '#000000'
				},
				series : [
					{
						// 这里设置线条样式
						lineStyle: {
							color: '#0000ff', // 示例：蓝色
							width: 1 // 线条宽度
						},
						name: '能力值',
						type: 'radar',
						data : [
							{
								value : [135, 99, 88, 100, 120, 80],
								name : '预算分配'
							},
						]
					}
				]
			};

			radarChart.setOption(radarOption);
			$(window).resize(radarChart.resize);

		});
    </script>
</body>
</html>